<template>
    <div :style="`width:${width}px;height:${height}px;z-index:50;position: relative;display:${visible?'flex':'none'};justify-content: center;align-items: center;`">
        <svg ref="pageSvg"            						
            :width="svgWidth" 
            :height="svgHeight"
            :style="`background:${svgBackground};${transform};`">            
        </svg>
    </div>
</template>
<script>
import {items} from './items'
export default {
    name: "viewer",
    data(){
        return {
            itemsType:items,
            page:null,
            items:[],
            visible:true,			
        }
    },
    computed:{
        svgWidth:function(){
            return this.page && this.page.size && this.page.size.width?this.page.size.width:'100';
        },
        svgHeight:function(){
            return this.page && this.page.size && this.page.size.height?this.page.size.height:'100';
        },
        svgBackground:function(){
            return this.page && this.page.backgroundColor?this.page.backgroundColor:"#ffffff"
        },
        transform:function(){
            let widthScale = this.width / this.svgWidth, heightScale = this.height / this.svgHeight;
            //translate(${ this.svgWidth * (widthScale - 1) / 2},${ this.svgHeight * (heightScale - 1) / 2})
            var transform = `transform:scale(${widthScale}, ${heightScale})`
            console.log('transform:',transform)
            if(widthScale<heightScale){
                return `transform:scale(${widthScale})`
            }else{
                return `transform:scale(${heightScale})`
            }            
            return transform;
        }
    },
    props:{
        width:{type:Number,default:800},
        height:{type:Number,default:600}      
    },
    methods:{
        showPage:function(page){
            this.visible=true;
            this.clearSVG();
            this.page=page;
            this.page.items.forEach(item=>{
                this.renderItem(this.page,item);
            })            
        },
        hidden:function(){
            this.visible=false;
        },
        clearSVG:function(){
			//console.log('clearSVG in');
			if(this.$refs.pageSvg && this.$refs.pageSvg.querySelectorAll){
				//console.log('clearSVG');
				this.$refs.pageSvg.querySelectorAll(".editor-element").forEach(element=>{
					this.$refs.pageSvg.removeChild(element);
				});
			}
        },
        renderItem:function(page,item){//加载item
			var that=this;
			item.idx=page.items.length;
			item.pageSize=page.size;
			item.selected=false;
			item.checked=false;
			item.onChecked=(el,event)=>{//选中控件回调
				//console.log('onChecked',el,event)
				return function(){
					//that.itemInstanceChecked(el,event);
				}
			};
			
			item.onUnChecked=(el,event)=>{//选中控件回调
				return function(){
					//that.$set(that.pages[that.activePageIndex].items[el.idx],'selected',false);
					//that.$set(that.pages[that.activePageIndex].items[el.idx],'checked',false);					
				}
			};

			item.onSelected=(el,event)=>{//选择控件回调
				return function(){
					//that.itemsInstanceSelected([el],event);
				}
			};

			item.onUnSelected=(el,event)=>{//取消选择控件回调
				return function(){
					//that.itemsInstanceSelected([el],event);
				}
			};

			item.onResizeDown=(idx,resizeType)=>{
				return function(){
					//that.itemResizeDown(idx,resizeType);
				}
			};

			item.onDragDown=(idx,resizeType)=>{
				return function(){
					//that.currentClientXY={x:event.clientX,y:event.clientY};
					//that.itemDrag(idx,event);
				}
			};

			item.onDetailChange=(item)=>{
				return function(){
					//that.itemDetailChange(item);
				}
			};

			item.onUpdateAttr=(item,attr,v)=>{
				return function(){
					//that.$set(that.pages[that.activePageIndex].items[item.idx],attr,v);
				}
			};
						
			var its = this.itemsType.filter(e=>e.type === item.type)[0];			
			//item=its.methods['install'](item,page,event);
			this.items.push(item);
			its.methods['render'](this.$refs.pageSvg,item);
			//item=this[`${item.type}Install`](page,item,event);
			//page.items.push(item);
			return item;
		},
		dataChange:function(dataId,dataValue){//数据变化回调
			
		}
    }
}
</script>